<template>
    <transition name="modal-fade"> <!-- 添加过渡效果 -->
      <div class="modal-overlay" v-if="show" @click.self="close">
        <div class="modal-content">
          <header class="modal-header">
            <slot name="header"></slot>
            <button class="close-button" @click="close">×</button>
          </header>
          <transition name="slide-down"> <!-- 为 modal-body 添加过渡效果 -->
            <div class="modal-body">
              <slot name="body"></slot>
            </div>
          </transition>
        </div>
      </div>
    </transition>
</template>

<script setup>
import { defineEmits, ref } from 'vue';

const emit = defineEmits(['close']);
const show = ref(true); // 控制显示状态

function close() {
show.value = false; // 关闭时设置为 false
setTimeout(() => emit('close'), 300); // 延迟发出关闭事件，等待动画完成
}
</script>

<style scoped>
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}

.modal-content {
background-color: #fff8dc;
padding: 20px;
border-radius: 8px;
width: 300px;
max-width: 80%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
border: 2px solid #8b4513;
font-family: 'Courier New', Courier, monospace;
}

.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
color: #333;
margin-bottom: 10px;
}

.close-button {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: #8b4513;
}

.modal-body {
font-size: 14px;
color: #333;
line-height: 1.6;
text-align: left;
}

.modal-body h2 {
font-size: 18px;
margin-bottom: 10px;
color: #8b4513;
}

.modal-body p {
margin-bottom: 8px;
}

/* 添加过渡动画 */
.modal-fade-enter-active, .modal-fade-leave-active {
transition: opacity 0.3s;
}

.modal-fade-enter, .modal-fade-leave-to /* .modal-fade-leave-active in <2.1.8 */ {
opacity: 0;
}

/* modal-body 从上方滑入的动画 */
.slide-down-enter-active, .slide-down-leave-active {
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.slide-down-enter, .slide-down-leave-to {
transform: translateY(-20px);
opacity: 0;
}
</style>